<template>
  <zl-panel>
    <div slot="tableHeader">
      <el-row>
        <el-col :span="14">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-input size="mini" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input size="mini" placeholder="用户ID"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" v-waves icon="el-icon-search">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="10">
          <el-button v-waves size="mini" icon="el-icon-plus">添加用户</el-button>
          <el-button v-waves size="mini" icon="el-icon-goods">用户导入</el-button>
          <el-button v-waves size="mini" icon="el-icon-sold-out">添加导出</el-button>
        </el-col>
      </el-row>
    </div>

    <el-table
      slot="tableMain"
      :data="tableData4"
      style="width: 100%;"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
      @sort-change="handleSortChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        fixed
        prop="date"
        label="日期"
        width="150"
        sortable="custom">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="姓别"
        width="120"
        :formatter="formatterSex"
        :filters="[{ text: '男', value: '1' }, { text: '女', value: '0' }]"
        :filter-method="filterTagSex"
        filter-placement="bottom-end">
      </el-table-column>
      <el-table-column
        prop="province"
        label="省份"
        width="120"
        sortable="custom">
      </el-table-column>
      <el-table-column
        prop="city"
        label="市区"
        width="120">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="300">
      </el-table-column>
      <el-table-column
        prop="zip"
        label="邮编"
        width="120">
      </el-table-column>

      <el-table-column
        prop="nickName"
        label="昵称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="120">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="remarks"
        label="备注"
        width="120">
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="120">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData4)"
            type="text"
            size="small">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      slot="tableFooter"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 50, 100, 1000]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </zl-panel>
</template>

<script>
  export default {
    name: 'login',
    data () {
      return {
        msg: 'userManage',
        currentPage: 1,
        tableData4: [{
          date: '2016-05-03',
          name: '王小虎',
          sex: '0',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          nickName: '小虎',
          email: 'wrw@163.com',
          phone: '15823546558',
          remarks: '普陀区王小虎'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          sex: '1',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          nickName: '小虎',
          email: 'wrw@163.com',
          phone: '15823546558',
          remarks: '普陀区王小虎'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          sex: '1',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          nickName: '小虎',
          email: 'wrw@163.com',
          phone: '15823546558',
          remarks: '普陀区王小虎'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          sex: '1',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          nickName: '小虎',
          email: 'wrw@163.com',
          phone: '15823546558',
          remarks: '普陀区王小虎'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          sex: '1',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          nickName: '小虎',
          email: 'wrw@163.com',
          phone: '15823546558',
          remarks: '普陀区王小虎'
        }],
        multipleSelection: []
      }
    },
    methods: {
      handleSelectionChange (val) {
        this.multipleSelection = val
        console.log('handleSelectionChange:', this.multipleSelection)
      },
      handleSortChange (val) {
        console.log('handleSortChange:', val)
      },
      deleteRow (index, rows) {
        console.log('deleteRow:', index, rows)
      },
      filterTagSex (value, row) {
        return row.sex === value
      },
      formatterSex (row, column) {
        console.log('formatterSex:', 'row:', row.sex, 'column:', column)
        if (row.sex === '0') {
          return '女'
        }
        if (row.sex === '1') {
          return '男'
        }
        return '不明'
      },
      handleSizeChange (val) {
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange (val) {
        console.log(`当前页: ${val}`)
      }
    }
  }
</script>
<style scoped>

</style>
